<template>
	<view class="register">
		<view class="register-from">
			<view class="register-logo">
				<image src="../../../static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="from">
				<van-cell-group>
					<van-field type="number" clearable placeholder="请输入手机号码" @change="cPhone" />
					<van-field
						type="number"
						clearable
						@change="cVerification"
						use-button-slot
						placeholder="请输入验证码"
					>
						<view class="register-from-sms" :class="{'activeSMS': ifSMS}" @tap="getSMS" slot="button">
							{{ timer.text }}
						</view>
					</van-field>
					<van-field
						clearable
						type="password"
						placeholder="请输入登录密码"
						@change="cPassword"
					/>
					<van-field
						clearable
						type="password"
						placeholder="确认登录密码"
						@change="cPassword2"
					/>
					<van-field clearable placeholder="邀请码" @change="cInvite" />
				</van-cell-group>
			</view>
		</view>
		<view class="register-btn" :class="{'active': active}">
			<van-button
				size="large"
				custom-class="register-btn-reset"
				:loading="loading"
				@click="onSubmit"
			>
				注册
			</van-button>
		</view>
	</view>
</template>

<script>
import * as reg from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
const md5 = require("md5");
export default {
	data() {
		return {
			loading: false,
			active: false,
			ifSMS: false,
			from: {
				phone: '',
				verification: '',
				password: '',
				password2: '',
				invite: ''
			},
			serverTime: '',
			verify: {
				phone: '手机号码格式不正确',
				verification: '验证码格式不正确',
				password: '密码格式不正确',
				password2: '两次密码输入不同'
			},
			err: '',
			timer: {
				func: '',
				count: '',
				text: '获取验证码'
			} // 倒计时
		};
	},
	onLoad() {},
	methods: {
	...mapActions([
			'setUserInfo'
		]),
		goLogin() {
			uni.navigateTo({
				url: '/pages/user/login/index'
			});
		},
		getTime() {
			// 获取时间戳
			return new Promise((resolve, reject) => {
				this.$http.getTime({ tel: this.from.phone }).then(e => {
						const md = this.from.phone + e.data.data;
						this.serverTime = md5(md);
						resolve(this.serverTime);
				}).catch(err => {
					uni.showToast({
						title: '网络异常',
						icon: 'none'
					});
					this.ifSMS = false
				});
			});
		},
		sendCode() {
			// 获取短信
			return new Promise((resolve, reject) => {
				if (this.timer.count > 0) return false;
				this.$http
					.sendCode({
							time: this.serverTime,
						tel: this.from.phone// ,md5str: this.serverTime
					})
					.then(e => {
						if (e.data.msg.toLowerCase() === 'ok') {
							uni.showToast({
								title: '发送成功',
								icon: 'none'
							});
							resolve();
							this.timer.count = 59;
							this.timer.func = setInterval(() => {
								this.timer.count--;
								this.timer.text = this.timer.count + 's';
								if (this.timer.count <= 0) {
									this.ifSMS = false
									this.timer.text = '获取验证码';
									clearInterval(this.timer.func);
								}
							}, 1000);
							return
						}
						uni.showToast({
							title: '发送失败',
							icon: 'none'
						});
					});
			});
		},
		async getSMS() { // 发送短信
			const regPhone = reg.regPhone(this.from.phone)
			if (regPhone) {
				uni.showToast({
					title: regPhone,
					icon: 'none'
				});
				return
			}
			if (this.ifSMS) return
			this.ifSMS = true
			await this.getTime({tel: this.from.phone})
			await this.sendCode()
		},
		onSubmit() {
			if (this.loading) return
			const regSubmit = reg.regSubmit(this.from)
			if (regSubmit) {
				uni.showToast({
					title: regSubmit, 
					icon: 'none'
				});
				return
			}
			this.active = true
			this.loading = true
			this.$http.register({
				tel: this.from.phone,
				code: this.from.verification,
				pwd: this.from.password,
				time: this.serverTime,
				pwd2: this.from.password2,
				jypwd: this.from.payPassword,
				pCode: this.from.invite
			})
			.then(e => {
				if (e.data.msg === 'ok') {
					uni.reLaunch({
						url: '/pages/user/mnemonic/index?phone=' + this.from.phone
					});
// 					uni.showToast({
// 						title: '注册成功,自动登录', 
// 						icon: 'none'
// 					});
// 					this.setUserInfo(e.data.data).then(e => {
// 						setTimeout(() => {
// 							uni.switchTab({
// 								url: '/pages/wallet/index'
// 							});
// 						}, 500)
// 					})
					this.loading = false
					return
				}
				uni.showToast({
					title: e.data.msg,
					icon: 'none'
				});
				this.loading = false
			})
		},
		cPhone(e) {
			this.from.phone = e.detail;
			this.verify.phone = reg.regPhone(this.from.phone)
			this.ifVerif()
		},
		cVerification(e) {
			this.from.verification = e.detail;
			this.verify.verification = reg.regVerification(this.from.verification)
			this.ifVerif()
		},
		cPassword(e) {
			this.from.password = e.detail;
			this.verify.password = reg.regPassword(this.from.password)
			this.ifVerif()
		},
		cPassword2(e) {
			this.from.password2 = e.detail;
			this.verify.password2 = reg.regPassword2(this.from.password, e.detail)
			this.ifVerif()
		},
		cPayPassword(e) {
			this.from.payPassword = e.detail;
			this.verify.payPassword = reg.regPayPassword(this.from.payPassword)
			this.ifVerif()
		},
		cInvite(e) {
			this.from.invite = e.detail;
			this.verify.invite = reg.regInvite(this.from.invite)
			this.ifVerif()
		},
		ifVerif() {
			const arr = Object.values(this.verify);
			if (arr.length >= 5) {
				for (const i of arr) {
					if (i) {
						this.active = false
						return
					}
				}
				this.active = true
			}
		}
	}
};
</script>


<style lang="scss" scoped>
@import '../../../common/user.scss';
.register {
	&-logo {
		margin: 50upx auto 60upx auto;
	}
}
</style>
